<template>
  <div class="box">
    <el-card>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <div class="title">
            <el-form-item label="项目名称" style="width: 50%">
              <el-select v-model="form.name1" placeholder="请选择项目名称">
                <el-option value="2025xx行动" label="2025xx行动"></el-option>
                <el-option value="2024xx行动" label="2024xx行动"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-col :span="6">
            <el-form-item label="督办编号">
              <el-input v-model="form.SupvNumber" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="级别">
              <el-select v-model="form.dept" placeholder="请选择级别">
                <el-option value="集团级" label="集团级"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="来源">
              <el-select v-model="form.perl" placeholder="请选择来源">
                <el-option value="其他" label="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="form.name" placeholder="请输入创建人" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类">
              <el-input v-model="form.Classification" placeholder="请输入分类" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="任务标题">
              <el-input v-model="form.title" placeholder="请输入任务标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="具体任务">
              <el-input type="textarea" v-model="form.SpecificTasks" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作举措">
              <el-input type="textarea" v-model="form.WorkMeasures" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成标准">
              <el-input type="textarea" v-model="form.Standard" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.Remarks" :autosize="{ minRows: 5, maxRows: 5 }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-col :span="24" class="btn-Add">
        成果与限制时间：
        <el-button type="primary" @click="oldAdd">插入一行</el-button>
      </el-col>
      <el-table :data="tableData" style="width: 100%" height="400" border>
        <el-table-column fixed="left" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="oldDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column
          prop="achievement"
          label="预期标志性成果"
          min-width="500"
          :autosize="{ minRows: 5, maxRows: 5 }"
        >
          <template slot-scope="scope">
            <el-input type="textarea" v-model="scope.row.achievement" :autosize="{ minRows: 3, maxRows: 5 }"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="完成时间" min-width="150">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.time" type="date" placeholder="选择日期"> </el-date-picker>
          </template>
        </el-table-column>

        <el-table-column prop="person" label="责任部门" min-width="230">
          <template slot-scope="scope">
            <el-input placeholder="请输入内容" v-model="scope.row.person" class="input-with-select">
              <el-button slot="append" icon="el-icon-zoom-in"></el-button>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="btn-Add">
        承办部门：
        <el-button type="primary" @click="oldAdd">选择部门</el-button>
      </el-col>

      <el-table :data="tableDatas" style="width: 100%" height="200" border>
        <el-table-column fixed="left" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="oldDel(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="person" label="责任部门" min-width="230"> </el-table-column>
      </el-table>
      <el-button type="primary" @click="Cancel">保存</el-button>
      <el-button type="primary" @click="Sure">单独提交</el-button>
    </el-card>
    <!--弹出框 -->
    <el-dialog title="提交审批" :visible.sync="dialogFormVisible">
      <span>确定要提交此单据</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // props: ['dialogVisible'],
  // watch: {
  //   Visibles(newVal, oldVal) {
  //     // newVal是新值，oldVal是旧值
  //     this.Visibles = newVal
  //     console.log('1')
  //   }
  // },
  data() {
    return {
      dialogFormVisible: false,
      Visibles: this.$route.query.dis,
      form: {
        name1: '2025xx行动',
        dept: '集团级',
        perl: '其他',
        name: '其他',
        Classification: '定方向',
        title: '1.深入谋划“十五五”发展规划',
        SpecificTasks:
          '深入子公司走访调研，进一步把握相关业务的产业政策、市场形势、发展趋势，并结合上级部署要求和集团功能定位、主责主业和拟培育方向，提出集团“十五五”时期战略定位、主攻方向、发展目标、主要路径等，编制集团公司“十五五”规划指引',
        WorkMeasures:
          '1.指导各子公司开展“十五五”规划前期分析，通过开展行业内外走访调研等方式，切实把握好各业务产业政策、市场形势、发展趋势。\n2.组织各子公司开展“十五五”规划思路研究，结合产业发展形势分析情况，提出本企业“十五五”时期战略思路、发展目标等。\n3.根据国资委“十五五”规划编制有关安排和集团公司战略发展相关部署，结合各子公司“十五五”规划编制思路，综合分析、深入论证，初步明确集团“十五五”时期战略定位、主攻方向、发展目标、主要路径等，研究提出集团“十五五”规划编制指引。',
        Standard: '1.各子公司初步明晰本企业“十五五”发展思路\n2.集团初步明确“十五五”发展思路'
      },
      tableData: [
        { achievement: '1.集团“十五五”发展初步思路', time: '2025-03-05' },
        { achievement: '2.集团“十五五”规划总体框架', time: '2025-06-05' },
        { achievement: '3.集团“十五五”发展总体规划', time: '2025-10-05' }
      ],
      tableDatas: [{ person: '部门一' }, { person: '部门二' }]
    }
  },
  created() {
    this.Visibles = this.$route.query.dis
    console.log(this.Visibles)
  },
  methods: {
    Cancel() {
      // this.Visibles = false
      // this.$emit('Cancel', this.Visibles)
    },
    Sure() {
      this.dialogFormVisible = true
      // this.Visibles = false
      // this.$emit('Cancel', this.Visibles)
    },
    handleClose(done) {
      // this.Visibles = false
      // this.$emit('Cancel', this.Visibles)
    },
    oldAdd() {}
  }
}
</script>

<style scoped>
.box >>> .el-select {
  width: 93%;
}
.title {
  display: flex;
  justify-content: center;
}
.btn-Add {
  padding: 20px 0;
}

.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
</style>
